<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>4</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <style>
            body{
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
            }
            caption{
                background-color: red;
            }
            th{
                font-weight: bold;
                border: none;
            }
            .tr:nth-child(even){
                background-color: rgb(214, 210, 210);
            }
            td{
                border: none;
            }
            .name{
                width: 300px;
            }
            .boxoffice{

            }
        </style>

    </head>
    <body>


        <div id="app">
            <table rules="cols">
                <caption>电影系列</caption>
                <tr>
                    <th>电影名称</th>
                    <th>票房</th>
                </tr>
                <tr v-for="(item,index) in movie" v-key="index" class="tr">
                    <td class="name">{{item.name}}</td>
                    <td class="boxoffice">{{item.boxoffice}}亿</td>
                </tr>
            </table>
        </div>

        <script>
        var exam= new Vue({
        el: "#app",
        data:{
		movie : [//定义影片信息数组
			{ name : '西虹市首富',boxoffice : 25.4 },
			{ name : '毒液：致命守护者',boxoffice : 18.7 },
			{ name : '我不是药神',boxoffice : 30.9 },
			{ name : '红海行动',boxoffice : 36.5 },
			{ name : '侏罗纪世界2',boxoffice : 16.9 },
			{ name : '复仇者联盟3:无限战争',boxoffice : 23.9 },
			{ name : '头号玩家',boxoffice : 13.9 },
			{ name : '唐人街探案2',boxoffice : 33.9 },
			{ name : '捉妖记2',boxoffice : 22.3 },
			{ name : '海王',boxoffice : 19.5 }
		]
	}
        })

    </script>
    </body>
</html>